<template>
  <div class="partner-tab">
    <el-dialog
      class="areaTab"
      title="业务区域"
      :visible.sync="areaVisible"
      width="600px">
      <el-table
        v-loading="loading"
        :data="areaData"
        stripe
        show-header
        style="width: 100%;">
        <el-table-column
          type="index"
          label="序号"/>
        <el-table-column
          prop="country"
          label="国家"/>
        <el-table-column
          prop="province"
          label="省份"/>
        <el-table-column
          prop="city"
          label="市"/>
        <el-table-column
          prop="hospital"
          label="医院"/>
      </el-table>
      <div class="area-pagination">
        <el-pagination
          small
          layout="prev, pager, next"
          :total="50"/>
      </div>
    </el-dialog>
    <el-dialog
      class="lintTab"
      title="业务关系"
      :visible.sync="shipVisible"
      width="600px">
      <el-table
        v-loading="loading"
        :data="shipData"
        stripe
        show-header
        style="width: 100%;">
        <el-table-column
          type="index"
          label="序号"/>
        <el-table-column
          prop="line"
          label="产品线"/>
        <el-table-column
          prop="user"
          label="负责人"/>
      </el-table>
    </el-dialog>
    <el-dialog
      width="660px"
      title="波科国际医疗贸易(上海)有限公司"
      :visible.sync="backTuneVisible">
      <AddForm/>
      <div
        slot="footer"
        class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      width="660px"
      title="波科国际医疗贸易(上海)有限公司"
      :visible.sync="backTuneShowVisible">
      <DataForm />
    </el-dialog>
    <el-dialog
      width="400px"
      title='波科国际医疗贸易(上海)有限公司'
      :visible.sync="modifyInfoVisible">
      <ModifyForm/>
    </el-dialog>

    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      show-header
      style="width: 100%;">
      <el-table-column
        type="index"
        label="序号"
        width="56"/>
      <el-table-column
        prop="name"
        label="合作伙伴名称"
        width="200"/>
      <el-table-column
        prop="partnerType"
        label="合作伙伴类型"
        width="120"/>
      <el-table-column
        prop="partnerShip"
        label="合作关系"
        width="80"/>
      <el-table-column
        label="业务区域"
        width="80">
        <template slot-scope="scope">
          <el-button
            @click.native="showArea(scope.row)"
            type="text"
            size="small">明细
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="业务关系"
        width="80">
        <template slot-scope="scope">
          <el-button
            @click.native="showShip(scope.row)"
            type="text"
            size="small">查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="train"
        label="是否需要培训"
        width="120"/>
      <el-table-column
        prop="backTune"
        label="是否需要背调"
        width="120"/>

      <el-table-column
        label="背调报告"
        width="120">
        <template slot-scope="scope">
          <el-button
            @click.native="addBackTuneDetail(scope.row)"
            type="text"
            size="small">添加
          </el-button>
          <el-button
            @click.native="showBackTuneDetail(scope.row)"
            type="text"
            size="small">查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="createdAt"
        label="首营时间"
        width="180"/>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native="modifyInfo(scope.row)">修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import AddForm from './addForm'
import ModifyForm from './modifyForm'
import DataForm from './dataForm'
export default {
  name: 'PartnerTab',
  components: {
    AddForm, ModifyForm, DataForm
  },
  data () {
    return {
      tableData: [
        {
          id: '123',
          name: '北京爱立建医疗器械有限公司',
          partnerType: '原厂',
          partnerShip: '下游',
          train: '是',
          backTune: '是',
          createdAt: '2019-04-02 13:12:12'
        },
        {
          id: '123',
          name: '波科国际医疗贸易(上海)有限公司',
          partnerType: '原厂',
          partnerShip: '上游',
          train: '是',
          backTune: '否',
          createdAt: '2019-04-02 13:12:12'
        },
        {
          id: '123',
          name: '波科国际医疗贸易(上海)有限公司',
          partnerType: '原厂',
          partnerShip: '上游',
          train: '否',
          backTune: '是',
          createdAt: '2019-04-02 13:12:12'
        }
      ],
      exchangeData: [
        {
          id: '123',
          status: '邀请方',
          name: '国科恒泰（北京）医疗科技股份有限公司',
          createdAt: '2019-04-02 13:12:12',
          categoryId: '4781',
          updatedBy: '张三',
          oldDocumentCode: 'SYJH20190402008',
          step: '发起'
        },
        {
          id: '123',
          status: '受邀方',
          name: '江西世海贸易有限公司',
          createdAt: '2019-04-02 13:12:12',
          categoryId: '4781',
          updatedBy: '',
          oldDocumentCode: 'SYJH20190402008',
          step: ''
        }
      ],
      areaData: [
        {
          id: '111',
          country: '中国',
          province: '北京',
          city: '北京',
          hospital: '北京协和医院'
        },
        {
          id: '112',
          country: '中国',
          province: '上海',
          city: '上海',
          hospital: '上海第人民医院'
        }
      ],
      shipData: [
        {
          id: '122',
          line: 'SK骨水泥',
          user: '张三'
        },
        {
          id: '123',
          line: 'MT-脊柱',
          user: '李晓峰'
        },
        {
          id: '123',
          line: 'BK-IC',
          user: '王五'
        }
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      modifyInfoVisible: false,
      areaVisible: false, // 业务区域弹框
      shipVisible: false, // 业务关系弹出框
      backTuneVisible: false, // 添加背调报告弹出框
      backTuneShowVisible: false // 添加背调报告弹出框
    }
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    //   修改信息
    modifyInfo (row) {
      this.modifyInfoVisible = true
    },
    handleClose (row) {
    },
    // 展示业务区域
    showArea (e) {
      this.areaVisible = true
    },
    // 展示业务关系
    showShip (e) {
      this.shipVisible = true
    },
    // 添加背调报告
    addBackTuneDetail (e) {
      this.backTuneVisible = true
    },
    // 显示背调报告
    showBackTuneDetail (e) {
      this.backTuneShowVisible = true
    }
  }
}
</script>

<style scoped lang="less">
    .partner-tab {
      .area-pagination {
        margin-top: 15px;
        text-align: center;
      }
    }

</style>
